import dynamic from 'next/dynamic';
import { getIdFromSlug, getNameFromSlug } from '@/core/utils/slug';
import { useRouter } from 'next/router';
import _ from 'lodash';
import Seo from '@/core/components/Seo';
import Breadcrumb from '@/lib/brand/components/Breadcrumb';
import useBrand from '@/lib/brand/hooks/useBrand';
import PageNotFound from '@/pages/404';

const BasicLayout = dynamic(() =>
  import('@/core/components/layouts/BasicLayout')
);
const ProductSearch = dynamic(() =>
  import('@/lib/product/components/ProductSearch')
);
const Brand = dynamic(() => import('@/lib/brand/components/Brand'));

export default function BrandDetail() {
  const router = useRouter();
  const { slug = '' } = router.query;

  const brandName = getNameFromSlug(slug);
  const id = getIdFromSlug(slug);
  const { brand } = useBrand({ id });
  // if ( !brand.isLoading && _.isEmpty(brand.data)) {
  //   console.log('ini masuk pak')
  //   return <PageNotFound />;
  // }
  return (
    <BasicLayout>
      {/* <Seo
        title={`Jual Produk Resmi ${brandName} Indonesia | Indoteknik.com`}
        description='B2B Marketplace MRO &amp; Industri dengan Layanan Pembayaran Tempo, Faktur Pajak, Online Quotation, Garansi Resmi &amp; Harga Kompetitif'
        additionalMetaTags={[
          {
            property: 'keywords',
            content: `Jual ${brandName}, beli ${brandName}, Distributor ${brandName} Indonesia, cari ${brandName}, produk ${brandName}, ${brandName} Indonesia, harga ${brandName}`
          }
        ]}
      /> */}
      <Seo
        title={`Jual Produk Resmi ${brandName} Indonesia | Indoteknik.com`}
        description='B2B Marketplace MRO &amp; Industri dengan Layanan Pembayaran Tempo, Faktur Pajak, Online Quotation, Garansi Resmi &amp; Harga Kompetitif'
        additionalMetaTags={[
          {
            property: 'keywords',
            content: `Jual ${brandName}, beli ${brandName}, Distributor ${brandName} Indonesia, cari ${brandName}, produk ${brandName}, ${brandName} Indonesia, harga ${brandName}`,
          },
        ]}
        // canonical={`${process.env.NEXT_PUBLIC_SELF_HOST}/shop/brands/${slug}`}
        canonical={`${process.env.NEXT_PUBLIC_SELF_HOST}${
          router.asPath.split('?')[0]
        }`}
      />

      <Breadcrumb brandName={brandName} />

      <Brand brand={brand} />
      {!_.isEmpty(router.query) && (
        <ProductSearch
          query={_.omit(router.query, 'slug')}
          prefixUrl={`/shop/brands/${slug}`}
          defaultBrand={getNameFromSlug(slug)}
          brand={brand}
        />
      )}
    </BasicLayout>
  );
}